<template>
  <div class="ad-form">
    <div class="ad-block">
      <el-row class="parent-inf">
        <el-col :span="6">
          <ad-item label="公司名称：" :value="$attrs.data.name"/>
        </el-col>
        <el-col :span="6">
          <ad-item label="是否月结：" :value="$attrs.data.nature" dictName="yes_or_no"/>
        </el-col>
        <el-col :span="6">
          <ad-item label="客户类型：" :value="$attrs.data.type" dictName="customer_type"/>
        </el-col>
      </el-row>
      <div class="line"></div>
      <el-form size="mini" inline label-position="right" label-width="auto" ref="form" :model="form" v-loading="isDisableForm" :disabled="isDisableForm" class="form">
        <el-row :gutter="10" v-if="isArray(form.linkmanList)" v-for="(linkman, index) in form.linkmanList" :key="'linkman' + index">
          <el-col :span="6">
            <el-form-item label="联系人：" :prop="`linkmanList.${index}.name`" :rules="[{required: true, message: '请输入'}]">
              <el-input v-model="linkman.name" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话：" :prop="`linkmanList.${index}.phone`" :rules="[{required: true, message: '请输入'}]">
              <el-input v-model="linkman.phone" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="城市名称：" :prop="`linkmanList.${index}.city`" :rules="[{required: true, message: '请选择'}]">
              <ad-city-select v-model="linkman.city"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button size="mini" @click="delLinkman(index)" v-if="isShowListDelBtn(index, form.linkmanList.length)">删除</el-button>
            <el-button size="mini" @click="addLinkman" v-if="isShowListAddBtn(index) && $attrs.mode != 'edit'">添加</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="op">
      <el-button size="mini" type="primary" :loading="saving" @click="save">保存</el-button>
      <el-button size="mini" type="primary" plain @click="cancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import AdCitySelect from '@/components/AdCitySelect'
import AdItem from '@/components/AdItem'
import { isArray } from '@/utils/type'
import adForm from '@/mixins/adForm'
import { add, edit, get } from '@/api/relation/linkman'

class Linkman {}
class Form {
  linkmanList = [new Linkman()]
}

export default {
  components: { AdCitySelect, AdItem },
  mixins: [adForm({get, add, edit})],
  dicts: ['yes_or_no','customer_type'],
  data() {
    return {
      form: new Form(),
      reservedOneListItem: {linkmanList: Linkman},
    }
  },
  methods: { isArray,
    afterOpen() {
      this.form.id = this.$attrs.data.id
    },
    beforeEdit() {
      // this.form.id = this.$attrs.id
    },
    startEditSave() {
      // this.form.linkmanList = this.form.linkmanList[0]
      return {id: this.$attrs.id, ...this.form.linkmanList[0]}
    },
    finallyEditSave() {
      // this.form.linkmanList = [this.form.linkmanList]
    },
    afterGetDetail(res) {
      const linkman = res.data
      this.form.linkmanList = [linkman]
      return 'do_not_process_form_data'
    },
    addLinkman() {
      this.form.linkmanList.push(new Linkman())
    },
    delLinkman(index) {
      this.form.linkmanList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.parent-inf { padding-bottom: 20px; }
.form { padding-top: 20px; }
</style>